<template>
    <basic-container>
<!--    <avue-data-box :option="databoxoption"></avue-data-box>-->
    <avue-crud
            ref="dorm"
            :data="dormTableData"
            :option="dormOption"
            :page.sync="dormPage"
            :table-loading="tableLoading"
            @search-change="searchDormChange"
            @search-reset="dormSearchReset"
            @row-del="handleDelDorm"
            @row-edit=""
            @row-save="handleDormRowSave"
            @row-update="handleDormRowUpdate"
            @on-load="getDormList"
            @size-change=""
            @current-change=""
            @selection-change="selectionChange">
        <!--:permission="permissionList"-->
        <template slot-scope="scope" slot="menuLeft">
          <el-button
              class="filter-item"
              icon="el-icon-plus"
              size="small"
              type="primary"
              @click="addHandle()">新增
          </el-button>
<!--          <el-button-->
<!--              class="filter-item"-->
<!--              icon="el-icon-delete"-->
<!--              size="small"-->
<!--              type="danger"-->
<!--              @click="batchDelVisible()">批量删除-->
<!--          </el-button>-->
        </template>
        <template slot-scope="scope" slot="menu">
            <el-button
                class="filter-item"
                icon="el-icon-edit"
                size="mini"
                type="primary"
                @click.stop="handleDormRowEdit(scope.row,scope.index)">编辑
            </el-button>
          <el-button
              class="filter-item"
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="handleDelDorm(scope.row)">删除
          </el-button>
        </template>
    </avue-crud>

      <!--      宿舍新增窗口-->
      <el-dialog
          :visible.sync="dialogAddVisible"
          center
          title="新增"
          width="35%" @close="dictItemVisible"
          :close-on-click-modal="false">
        <el-form v-model="addform" :rules="rules" style="padding-left: 20px">
          <el-form-item label="楼栋名称" prop="buildingId">
            <el-col :span="16">
              <el-select v-model="value" placeholder="请选择楼栋名称" style="margin-left: 12px">
                <el-option
                    v-for="item in buildOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="宿舍号" prop="dormNumber">
            <el-input v-model="addform.dormNumber" placeholder="请输入宿舍号" style="width: 31%;margin-left: 24px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button
              class="filter-item"
              size="small"
              @click="dictItemVisible()">取消
          </el-button>
          <el-button
              class="filter-item"
              size="small"
              type="primary"
              @click="handleDormRowSave()">确定
          </el-button>
        </div>
      </el-dialog>

      <!--      宿舍新增窗口-->
      <el-dialog
          :visible.sync="dialogEditVisible"
          center
          title="编辑"
          width="35%" @close="dictEditVisible"
          :close-on-click-modal="false">
        <el-form v-model="editform" :rules="rules" style="padding-left: 20px">
          <el-form-item label="楼栋名称" prop="buildingId">
            <el-col :span="16">
              <el-select v-model="value" placeholder="请选择楼栋名称" style="margin-left: 12px">
                <el-option
                    v-for="item in buildOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="宿舍号" prop="dormNumber">
            <el-input v-model="editform.dormNumber" placeholder="请输入宿舍号"
                      style="width: 31%;margin-left: 24px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button
              class="filter-item"
              size="small"
              @click="dictEditVisible()">取消
          </el-button>
          <el-button
              class="filter-item"
              size="small"
              type="primary"
              @click="handleDormRowUpdate()">确定
          </el-button>
        </div>
      </el-dialog>
    </basic-container>
</template>

<script>
import {addDorm, delDorm, deldorms, editDorm, showDormList} from '@/api/hostel/dorm'
import {dormOption} from '@/const/crud/hostel/dorm'
import {PASS_STATE} from '@/const/Dict'
import {showBuildingList} from "@/api/hostel/building";

export default {
    name: "dorm",
    data() {
        return {
            //宿舍
            // dormOption:dormOption,
            dormChooseList:[],
            dormTableData:[],
            dormSearchForm: {},
            dormPage:{
                total: 0, // 总页数
              currentPage: 1, // 当前页数
              pageSize: 10 // 每页显示多少条
            },
            dormVisible: false,
            outerVisible: false,
            dormForm: {
              dormName: ''
            },
            dormEditItemData: [],
            tableLoading: false,
            dialogAddVisible: false,
            dialogEditVisible: false,
            buildOptions: [{
              value: '',
              label: '',
            }],
            value: '',
            addform: {
              dormNumber: ''
            },
            editform: {
              dormNumber: '',
              value: ''
            },
            rules: {  //必填项（验证规则）
              dormNumber: [
                {required: true, trigger: "none"}
              ],
              buildingId: [
                {required: true, trigger: "none"}
              ],
            },
          // 退宿
          dormOption : {
            /*card:true,*/
            border: true,  //竖线边框
            index: true,  //表格序号
            indexLabel: '序号',
            center: true,
            stripe: true,  //是否显示表格的斑马条纹
            menuAlign: 'center',  //菜单栏对齐方式
            menuWidth: 210,  //操作菜单栏的宽度
            align: 'center',  //表格列对其方式
            emptyBtnText: '重置', //清空按钮文案
            searchMenuSpan: 6,  //搜索框长度
            /*viewBtn: true, //是否显示查看按钮*/
            selection: false,  //表格是否显示可选
            /*excelBtn: true,  //表格导出按钮是否显示*/
            refreshBtn: true,  //表格上面小的 刷新按钮
            columnBtn: true,  //表格上面小的 列表显隐按钮
            searchBtn: true,  //搜索按钮
            saveBtn: true,
            updateBtn: true,
            cancelBtn: true,
            addBtn: false,
            delBtn: false,
            editBtn: false,
            props: {
              label: 'label',
              value: 'value'
            },
            column: [
              {
                label: '宿舍编号',  //字段标题
                prop: 'dormId',  //字段名称
                search: false,  //搜索是否显示
                hide: true,  //展示页面是否显示
                viewDisplay: true,  //详情时是否显示
                addDisplay: false,
                editDisplay: false,
                editDisabled: false
              },
              {
                label: '楼栋名称',  //字段标题
                prop: 'buildingName',  //字段名称
                search: true,  //搜索是否显示
                hide: false,  //展示页面是否显示
                type: 'select',
                dicUrl: '/campus/building/selectAll',
                dicMethod: 'get',
                props: {
                  label: 'buildingName',
                  value: 'buildingName'
                },
                change: (value) => {
                  this.dormSearchForm.buildingName = value.value
                  this.getDormList(this.page, this.dormSearchForm)
                },
              },
              {
                label: '宿舍号',  //字段标题
                prop: 'dormNumber',  //字段名称
                search: true,  //搜索是否显示
                hide: false,  //展示页面是否显示
                viewDisplay: false,  //详情时是否显示
                rules: [{
                  required: true,
                  message: "请输入宿舍号",
                  trigger: "blur"
                }]
              },
              {
                label: '宿舍状态',  //字段标题
                prop: 'dormStatus',  //字段名称
                search: false,  //搜索是否显示
                hide: false,  //展示页面是否显示
                viewDisplay: true,  //详情时是否显示
                addDisabled:true,
                addDisplay:false,
                dicData:PASS_STATE,
                editDisplay: false
              },
              {
                label: '创建时间',  //字段标题
                prop: 'createTime',  //字段名称
                search: false,  //搜索是否显示
                type: 'datetime',
                hide: false,  //展示页面是否显示
                viewDisplay: true,  //详情时是否显示
                format: 'yyyy-MM-dd HH:mm',
                valueFormat: 'yyyy-MM-dd HH:mm:ss',
                editDisplay: false,
                addDisplay:false
              }
            ]
          }
        }
    },
    computed: {
    },
    methods: {
      addHandle() {
        this.dialogAddVisible = true
        showBuildingList().then(res => {
          if (res.data.code === 0) {
            this.buildData = res.data.data.records
            this.buildOptions = this.buildData.map(item => {
              return {value: `${item.buildingId}`, label: `${item.buildingName}`};
            })
          }
        })
      },
      //获取楼栋下宿舍统计数据
      // getCountBuildingData(){
      //     getCountbybuilding().then(response => {
      //         for (var i = 0; i < this.databoxoption.data.length; i++) {
      //             //楼栋赋值
      //             //this.databoxoption.data[i].title=response.data.data[i].building_id
      //             //统计数量赋值
      //             this.databoxoption.data[i].count=response.data.data[i].countDorm
      //         }
      //     })
      // },
      //展示宿舍列表
      getDormList(page, params) {
        // debugger
        this.tableLoading = true
        // this.getCountBuildingData()
        showDormList(Object.assign({
          // descs: 'create_time',
          current: this.dormPage.currentPage,
          size: this.dormPage.pageSize
        }, params, this.dormSearchForm)).then(response => {
          this.dormTableData = response.data.data.records
          this.dormPage.total = response.data.data.total
          this.tableLoading = false
        })
      },
      //搜索宿舍页面内容
      searchDormChange(form, done) {
        this.dormSearchForm = form
        this.dormPage.currentPage = 1
        this.getDormList(this.dormPage, form)
        done()
      },
      //增加宿舍
      handleDormRowSave: function () {
        this.addform.buildingId = this.value
        if (this.addform.buildingId == ''){
          this.$message.error('请选择楼栋')
          return
        }
        if (this.addform.dormNumber == ''){
          this.$message.error('请输入宿舍号')
          return
        }
        addDorm(this.addform).then(res => {
          if (res.data.code === 0) {
            this.$message.success('新增成功')
            this.getDormList(this.dormPage)
            this.dialogAddVisible = false
          } else {
            this.$message.error('新增失败')
          }
        })
      },
      //点击新增的关闭
      dictItemVisible: function () {
        this.dialogAddVisible = false
        this.addform.dormNumber = null
        this.value = ''
      },
      //编辑宿舍
      handleDormRowEdit(row, index) {
        this.dialogEditVisible = true
        // this.$refs.dorm.rowEdit(row, index)
        this.editform.dormNumber = row.dormNumber
        this.editform.dormId = row.dormId
        this.value = row.buildingId.toString()
        showBuildingList().then(res => {
          if (res.data.code === 0) {
            this.buildData = res.data.data.records
            this.buildOptions = this.buildData.map(item => {
              return {value: `${item.buildingId}`, label: `${item.buildingName}`};
            })
          }
        })
        // this.editform.value= row.buildingId
      },
      //修改宿舍信息
      handleDormRowUpdate: function () {
        this.editform.buildingId = this.value
        if (this.editform.dormNumber == ''){
          this.$message.error('请输入宿舍号')
          return
        }
        // console.log(this.editform)
        editDorm(this.editform).then(res => {
          if (res.data.code === 0) {
            this.$message.success('修改成功')
            this.dialogEditVisible = false
            this.getDormList(this.dormPage)
          } else {
            this.$message.error('修改失败')
          }
        })
      },

      //点击编辑的关闭
      dictEditVisible: function () {
        this.dialogEditVisible = false
        this.editform.dormNumber = null
        this.value = ''
      },
      //删除宿舍
      handleDelDorm: function (row) {
        this.$confirm('删除宿舍，相关住宿人员信息将失效，对应楼栋将不再进行考勤，请谨慎操作', '警告', {
          confirmButtonText: '确认删除',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal:false,
        }).then(function () {
          return delDorm(row.dormId)
        }).then(res => {
          if (res.data.code === 0) {
                    this.$message.success('删除成功')
                    this.getDormList(this.dormPage)
                } else {
                    this.$message.error('删除失败'+res.data.msg)
                }
            })
        },
        //批量删除宿舍
        batchDelVisible: function () {
            let ids = this.dormChooseList.map(x => {
                return x.dormId
            })
            console.log(ids)
            deldorms(ids).then(res => {
                if (res.data.code === 0) {
                    this.$message.success('清除成功')
                } else {
                    this.$message.error('清除失败')
                }
                //this.dialogbetchDelVisible = false
                this.getDormList(this.dormPage)
            })
        },
        //表格的多选方法
        selectionChange(list) {
            this.dormChooseList = list
        },
        //清空时重置宿舍页面
        dormSearchReset(){
            this.dormPage={};
            this.dormSearchForm = 0;
            this.getDormList(this.dormPage)
        }
    }
}
</script>
<style scoped>
/deep/.el-form-item__label{
  text-align: left;
}
/deep/.avue-form__row{
  padding-left: 2px !important;
  margin-right: 36px;
}
</style>
